<template>
    <view>
        <view class="register-title">
            <view
                class="register-title-btn"
                :class="{ 'register-title-btn-active': false }"
            >
                <navigator url="/pages/login" redirect hover-class="className"
                    >登录</navigator
                >
            </view>
            <view
                class="register-title-btn"
                :class="{ 'register-title-btn-active': true }"
                >注册
                <view class="bar"> </view>
            </view>
        </view>
        <view class="register-container">
            <view class="register-input-wrap">
                <view class="register-input">
                    <view class="register-input-box">
                        <input
                            type="text"
                            placeholder="手机号码"
                            placeholder-class="register-input-placeholder"
                            v-model="form.tel"
                        />
                    </view>
                    <view class="register-input-box">
                        <input
                            type="text"
                            placeholder="输入验证码"
                            placeholder-class="register-input-placeholder"
                            v-model="form.code"
                            class="register-input-box-code"
                        />
                        <view
                            class="register-input-getcode"
                            @click="getCode"
                            v-if="!isGetCode"
                        >
                            获取验证码
                        </view>
                        <view class="register-input-getcode" v-if="isGetCode">
                            {{ delay }}s
                        </view>
                    </view>
                    <view class="register-input-box">
                        <input
                            type="password"
                            placeholder="设置密码（6-8位数字和字母）"
                            placeholder-class="register-input-placeholder"
                            v-model="form.password"
                        />
                    </view>
                    <view class="register-input-box">
                        <input
                            type="text"
                            placeholder="输入宝贝昵称"
                            placeholder-class="register-input-placeholder"
                            v-model="form.nickName"
                        />
                    </view>
                </view>
                <view class="register-btn" @click="handleRegister"> 注册 </view>
            </view>
        </view>
        <view class="register-select">
            <view
                class="register-select-box"
                :class="{ 'register-select-box-active': loginSelect }"
                @click="changeRegisterSelect"
                >✓</view
            >
            <view class="register-select-text">
                请阅读并同意我们的
                <text>《服务条款》</text>、<text>《隐私政策》</text>和
                <text>《儿童隐私保护政策》</text>进行注册和登录
            </view>
            <u-toast ref="uToast" />
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isGetCode: false,
            delay: 0,
            currentDelay: 0,
            form: {
                tel: "",
                code: "",
                password: "",
                nickName: "",
            },
            loginSelect: false,
            getCodeBtnText: "获取验证码",
        };
    },
    methods: {
        // 获取验证码
        getCode() {
            // 如果手机号格式正确
            if (this.mobileTest()) {
                if (!this.isGetCode) {
                    this.isGetCode = true;
                    this.delay = 60;
                    var timer = setInterval(() => {
                        this.delay--;
                        if (this.delay <= 0) {
                            this.isGetCode = false;
                            clearInterval(timer);
                        }
                    }, 1000);
                }
                this.getCodeReq();
            }
        },
        // 获取验证码请求
        getCodeReq() {
            let that = this;
            that.$u
                .get("sms_code", {
                    mobile: that.form.tel,
                })
                .then(() => {});
        },
        // 点击注册
        handleRegister() {
            // 如果表单全部填写
            if (this.checkForm()) {
                console.log("注册");
                this.registerReq();
            }
        },
        registerReq() {
            let o = {};
            o.mobile = this.form.tel;
            o.code = this.form.code;
            o.password = this.form.password;
            o.nick_name = this.form.nickName;

            this.$u.post("register_by_password", o).then(() => {
                this.toLogin();
            });
        },
        // 检查表单
        checkForm() {
            if (!this.form.tel) {
                this.showToast("请输入手机号码");
                return false;
            } else if (!this.form.code) {
                this.showToast("请输入验证码");
                return false;
            } else if (!this.form.password) {
                this.showToast("请输入密码");
                return false;
            } else if (!this.form.nickName) {
                this.showToast("请输入宝贝昵称");
                return false;
            } else if (!this.loginSelect) {
                this.showToast("请勾选用户协议");
                return false;
            }
            return true;
        },
        // 用户协议点击
        changeRegisterSelect() {
            this.loginSelect = !this.loginSelect;
        },
        // 手机号码验证
        mobileTest() {
            let mobielStr =
                /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
            if (!this.form.tel) {
                this.showToast("请输入手机号码");
                return false;
            } else if (!mobielStr.test(this.form.tel)) {
                this.showToast("请输入正确格式手机号码");
                return false;
            }

            return true;
        },
        // toast
        showToast(msg) {
            this.$u.toast(msg);
        },

        toLogin() {
            this.showToast("注册成功");
            setTimeout(() => {
                uni.navigateTo({
                    url: "/pages/login",
                });
            }, 500);
        },
    },
};
</script>

<style scoped>
page {
    background-color: rgb(253, 253, 240);
}
.register-container {
    width: 100%;
    box-sizing: border-box;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.register-title {
    display: flex;
    justify-content: center;
     height: 180px;
    background-color: rgb(51, 204, 0);
    align-items: baseline;
    padding-top: 160rpx;
}
.register-title-btn {
    margin: 0 60rpx;
    padding: 10rpx 10rpx;
    font-size: 36rpx;
    color: #fff;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bar {
    width: 80rpx;
    height: 16rpx;
    background: linear-gradient(
        to right,
        rgba(183, 248, 160, 1),
        rgba(101, 220, 80, 1)
    );
    margin-top: 10rpx;
    border-radius: 8rpx;
}
.register-input-wrap {
    position: relative;
    background-color: #fff;
    top: -60px;
    border-radius: 20px;
}
.register-input {
    display: flex;
    flex-direction: column;
    align-items: center;
	box-sizing: border-box;
    padding:0px 5%;
}
.register-input-box {
    width: 100%;
    box-sizing: border-box;
    margin-top: 40rpx;
    border-bottom: 2rpx solid #fff;
    display: flex;
    align-items: center;
}
.register-input-getcode {
    /* padding: 40rpx 10rpx; */
	height: 50px;
	line-height: 50px;
    border-radius: 80rpx;
    width: 600rpx;
    font-size: 32rpx;
    background-color: rgb(51, 204, 0);
    text-align: center;
    margin-left: 20rpx;
    color: #fff;
}
.register-input-box input {
    width: 100%;
    background-color: rgb(250, 247, 250);
    /* padding: 40rpx; */
	height: 50px;
	box-sizing: border-box;
	padding-left: 20px;
	font-size: 14px;
    border-radius: 80rpx;
}
.register-input-placeholder {
    font-size: 36rpx;
}
.register-btn {
    width: 590rpx;
    background-color: rgb(51, 204, 0);
    text-align: center;
    margin-top: 40rpx;
    /* padding: 40rpx; */
	height: 50px;
	font-size: 16px;
	line-height: 50px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 80rpx;
    font-size: 40rpx;
    color: #fff;
    margin-bottom: 40rpx;
}
.register-select {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10rpx;
    justify-content: space-between;
    margin-top: 40rpx;
    position: fixed;
    bottom: 29px;
    padding: 0 40rpx;
    box-sizing: border-box;
}
.register-select-box {
    height: 48rpx;
    width: 48rpx;
    border: 2rpx solid rgb(170, 170, 170);
    border-radius: 50%;
    text-align: center;
    line-height: 48rpx;
    color: rgba(0, 0, 0, 0);
}
.register-select-box-active {
    color: #fff;
    background-color: rgb(51, 204, 0);
}
.register-select-text {
    width: 90%;
    font-size: 24rpx;
    margin-left: 20rpx;
}
.register-select-text text {
    color: rgb(170, 170, 170);
}
</style>
